<template>
  <div>
    <div class="reg_box1">
      <img src="@/assets/img/bg_1@2x.png" alt="" />
      <div class="title">已失效</div>
      <!-- <div class="time">请在29分45秒内完成支付，超时将自动取消</div> -->
    </div>
    <div class="reg_box2">
      <div class="title_box"><span class="dot"></span>就诊信息</div>
      <div class="info_box">
        <div class="left">就 诊 人 ：</div>
        <div class="right">{{ detail.userName }}</div>
        <!-- <div class="right">
          {{ detail.name }} {{ " " + detail.sex == "1" ? "男" : "女" }}
        </div> -->
      </div>
      <div class="info_box">
        <div class="left">就诊医生：</div>
        <div class="right">{{ detail.orderDetail.doctorName }}</div>
      </div>
      <div class="info_box">
        <div class="left">就诊科室：</div>
        <div class="right">{{ detail.orderDetail.deptName }}</div>
      </div>
      <!--      <div class="info_box">-->
      <!--        <div class="left">就诊时间：</div>-->
      <!--        <div class="right">{{ detail.orderDetail.receiptDate }}</div>-->
      <!--      </div>-->
      <div class="info_box">
        <div class="left">开立时间：</div>
        <div class="right">{{ detail.orderDetail.receiptDate }}</div>
      </div>
      <div class="title_box"><span class="dot"></span>项目信息</div>
      <table class="record-info-table">
        <thead>
          <th>项目名称</th>
          <th>规格</th>
          <th>单价</th>
          <th>数量</th>
          <th>总额</th>
        </thead>
        <tbody>
          <template v-for="(presitem, index) in detail.payDetailList">
            <tr style="background-color: rgb(238, 247, 255)">
              <td>{{ presitem.detailName }}</td>
              <td>{{ presitem.detailSpec }}</td>
              <td>{{ presitem.detailPrice }}</td>
              <td>{{ presitem.detailCount }}</td>
              <td>{{ presitem.detailAmout }}</td>
            </tr>
            <!-- <tr>
              <td colspan="5" style="text-align: left; padding-left: 0.5rem">
                用法用量：{{ presitem.drugUseMemo }}
              </td>
            </tr> -->
          </template>

          <tr>
            <td
              colspan="5"
              style="text-align: right; padding-right: 0.5rem; font-size: 1rem"
            >
              合计：
              <span style="color: red">￥{{ detail.payTotalFee / 100 }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="height: 20px"></div>

  </div>
</template>
<script>
import { getPayDetail} from "@/api/api";
export default {
  data() {
    return {
      info: {},
      detail: {},
      userInfo: {},
      prescdetail: {
        prescDrugList: [],
      },
    };
  },
  created() {
    this.info = this.$route.query;
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    this.getPayDetail();
  },
  methods: {
    getPayDetail() {
      var data = {
        hospSequence: this.info.hospSequence,
        hosId: "1111",
        hospPatientId: "",
      };
      getPayDetail(data).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
        }
      });
    },

  },
  filters: {
    timefun(time) {
      if (time) {
        var newTime = time.slice(0, 2) + ":" + time.slice(2);
        newTime =
          newTime.slice(0, newTime.length - 2) +
          ":" +
          newTime.slice(newTime.length - 2);
        return newTime;
      }
    },
  },
};
</script>
<style scoped>
.reg_box1 {
  width: 100%;
  height: 142px;
  position: relative;
  color: #fff;
}
.reg_box1 > div {
  position: relative;
  margin-left: 16px;
}
.reg_box1 .title {
  text-align: left;
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  line-height: 42px;
}
.reg_box1 .time {
  font-size: 14px;
  /* font-weight: bold; */
  color: #ffffff;
  line-height: 42px;
}
.reg_box1 img {
  width: 100%;
  height: 100%;
  position: absolute;
}
.reg_box2 {
  width: calc(100% - 64px);
  padding: 16px;
  margin: 0px auto;
  position: relative;
  top: -4.6875rem;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(7, 62, 145, 0.24);
  border-radius: 5px;
}
.reg_box2 .title_box {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #131a2a;
  line-height: 42px;
}
.reg_box2 .title_box .dot {
  width: 3px;
  height: 15px;
  background: #448eff;
  border-radius: 2px;
  margin-right: 12px;
}
.reg_box2 .info_box {
  display: flex;
  line-height: 26px;
  margin: 5px 0;
}
.reg_box2 .info_box .left {
  /* width: 70px; */
  color: #a4adbe;
  font-size: 14px;
  text-align-last: justify;
}
.reg_box2 .info_box .right {
  width: calc(100% - 70px);
  word-wrap: break-word;
  word-break: normal;
  font-size: 15px;
}
.record-info-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(214, 223, 241, 1);
  font-size: 0.875rem;
}

.record-info-table thead {
  background-color: rgba(121, 190, 255, 0.8);
  font-size: 0.9375rem;
}

.record-info-table th {
  width: 20%;
  font-weight: normal;
  color: #ffffff;
  padding: 0.75rem 0rem;
  border: 1px solid rgba(214, 223, 241, 1);
}

.record-info-table td {
  text-align: center;
  width: 20%;
  padding: 0.75rem 0rem;
  word-wrap: break-word;
  border: 1px solid rgba(214, 223, 241, 1);
}
.btn_box {
  height: 55px;
  width: 100%;

  display: flex;
  position: fixed;
  bottom: 0;

  background: #ffffff;
  box-shadow: 0px 0px 13px 0px rgba(181, 189, 197, 0.28);
}
.btn_box > div {
  width: 50%;
  height: 100%;
  line-height: 55px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}
.btn_box .btn_box_1 {
  color: #448eff;
  width: calc(100% - 9.75rem);
  font-weight: normal;
  color: #000;
  text-align: left;
  padding-left: 1rem;
}

.btn_box .btn_box_2 {
  width: 8.75rem;
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  color: #fff;
}
</style>
